<template>
  <div class=".celerityTableDesign">
	<div class="queryList">
		<el-form :model="queryParams" v-if="isForm" ref="gelineQueryForm" :inline="true">
			<template v-for="item in designPageJson.queryList">
				<el-form-item :key="item.id" :label="`${item.columnLabel}:`" :prop="item.fieldName" v-if="renderHmtlRole(['eq', 'like', 'or'], item.sysQueryMethod) && item.showFlag === 'Y'">
					<el-input v-model="queryParams[item.fieldName]" :placeholder="`请输入${item.columnLabel}`" clearable size="small" @keyup.enter.native="handleQuery" />
				</el-form-item>
				<el-form-item :key="item.id" :label="`${item.columnLabel}:`" :prop="item.fieldName" v-if="renderHmtlRole(['select'], item.sysQueryMethod) && item.showFlag === 'Y'">
					<el-select v-model="queryParams[item.fieldName]" :placeholder="`请选择${item.columnLabel}`" clearable size="small">
						<el-option v-for="dictItem in returnDictData(item.dictType)" :key="dictItem.value" :label="dictItem.label" :value="dictItem.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item :key="item.id" :label="`${item.columnLabel}:`" v-if="renderHmtlRole(['date_range', 'date'], item.sysQueryMethod) && item.showFlag === 'Y'">
					<el-date-picker
						v-model="queryParams[item.fieldName]"
						size="small"
						value-format="yyyy-MM-dd"
						:type="item.sysQueryMethod === 'date_range' ? 'daterange' : 'date'"
						range-separator="-"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
					>
					</el-date-picker>
				</el-form-item>
				<el-form-item :key="item.id" :label="`${item.columnLabel}:`" :prop="item.fieldName" v-if="renderHmtlRole(['number_range'], item.sysQueryMethod) && item.showFlog === 'Y'">
					<el-input-number v-model="queryParams[item.fieldName]" controls-position="right" :min="1" style="max-width: 100px"></el-input-number>
					<span> - </span>
					<el-input-number v-model="queryParams[item.fieldName]" controls-position="right" :min="1" style="max-width: 100px"></el-input-number>
				</el-form-item>
			</template>
			<slot name="search"></slot>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="searchQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
	<div class="topBtnList" v-if="topBtnList.length !== 0">
		<template v-for="item in topBtnList">
			<el-button :key="item.id" v-if="item.showFlag === 'Y'" size="mini" :type="item.btnStyle" :plain="item.btnPlain" :icon="item.btnIconFont" @click="buttonEvent(item, 'topBtnList', selectData)">
				{{ item.btnLabel }}
			</el-button>
		</template>
		<slot name="topButton"></slot>
	</div>
	<div class="fieldList">
		<div class="tableSwitchLayout" v-if="designPageJson.tableConfig.switchLayout">
			<el-tooltip class="item" effect="dark" content="表格列表布局" placement="top">
				<el-button type="text" @click="switchLayout" :class="{btn: true, active: switchLayoutStatus.includes('table')}" size="mini" icon="gelineIconFont geline-wuxuliebiao"></el-button>
			</el-tooltip>
			<el-tooltip class="item" effect="dark" content="九宫格布局" placement="top">
				<el-button type="text" @click="switchLayout" :class="{btn: true, active: switchLayoutStatus.includes('sudoku')}" size="mini" icon="gelineIconFont geline-iconfontzhizuobiaozhun0247"></el-button>
			</el-tooltip>
			<slot name="topToolbar"></slot>
		</div>
		<div class="tableLayout" v-if="switchLayoutStatus.includes('table')">
			<el-table :data="tableList" style="width: 100%" :stripe="designPageJson.tableConfig.rowStripe" :border="designPageJson.tableConfig.border" @selection-change="handleSelectionChange" highlight-current-row @current-change="handleCurrentChange">
				<el-table-column v-if="designPageJson.tableConfig.selection" type="selection" width="55"></el-table-column>
				<template v-for="item in designPageJson.fieldList">
					<el-table-column
						:key="item.id"
						v-if="item.showFlag === 'Y'"
						:prop="item.fieldName"
						:sortable="sortValue(item.orderFlag)"
						:label="item.columnLabel"
						:width="item.width"
						:align="designPageJson.tableConfig.rowPosition"
					>
						<template slot-scope="scope">
							<span v-if="getHighlightFiled(item.fieldName)" class="highlightType" @click.stop="returnHighlightData(item, scope.row)">{{ scope.row[item.fieldName] }}</span>
							<span v-else>{{ scope.row[item.fieldName] }}</span>
							<slot :name="item.fieldName"></slot>
						</template>
					</el-table-column>
				</template>
				<slot name="tableColumn"></slot>
				<el-table-column v-if="isOperation" label="操作" :fixed="designPageJson.tableConfig.operaFixed" :align="designPageJson.tableConfig.rowPosition">
					<template slot-scope="scope">
						<el-button ref="rowBtn" v-for="item in rowsBtn" size="mini" :key="item.id" :type="item.btnStyle" :plain="item.btnPlain" :icon="item.btnIconFont" @click="buttonEvent(item, 'rowBtnList', [scope.row])">
							{{ item.btnLabel }}
						</el-button>
						<slot name="rowButton"></slot>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="sudokuLayout" v-if="switchLayoutStatus.includes('sudoku')">
			<celeritySudokuLayout :tableList="tableList" :isChange="true" :imageFiled="scratchable.imageFiled" :infoFiled="scratchable.infoFiled" @change="checkSudokuArray" />
		</div>
	</div>

  </div>
</template>

<script>
import celeritySudokuLayout from './celeritySudokuLayout'

const renderHmtlRole = (dataArry, data) => {
	return dataArry.includes(data)
}
const sortValue = (value) => {
	return value === 'Y' ? true : false
}
export default {
  name: 'celerityTablePage',
  components: {
	celeritySudokuLayout
  },
  props: {
    pageJson: {
		type: Object,
		default: () => {}
	},
	tableList: {
		type: Array,
		default: () => []
	},
	isOperation: {
		type: Boolean,
		default: true
	},
	highlightFiled: {
		type: Array,
		default: () => []
	},
	dictMap: {
		type: Object,
		default: () => {}
	},
	scratchable: {
		type: Object,
		default: () => {}
	}
  },
  data() {
	return {
		renderHmtlRole,
		sortValue,
		// 页面json
		designPageJson: this.pageJson,
		queryParams: {},
		// 选择数据
		selectData: null,
		// 切换布局状态，默认为table
		switchLayoutStatus: 'table'
	}
  },
  computed: {
	rowsBtn: function() {
		const data = this.designPageJson.rowBtnList.filter(item =>item.showFlag === 'Y')
		return data
	},
	isForm: function() {
		return this.designPageJson.queryList.length !== 0
	},
	topBtnList: function() {
		const data = this.designPageJson.topBtnList.filter(item =>item.showFlag === 'Y')
		return data
	}
  },
  created () {
		// console.log(this.tableList)
  },
  mounted() {
  },
  methods: {
		// 高亮字段
		getHighlightFiled(filed) {
			return this.highlightFiled.includes(filed)
		},
		returnHighlightData(item, data) {
			this.$emit('highlightEvent', item, data)
		},
		// 单选选中数据
		handleCurrentChange(data) {
			this.$emit('currentChange', data)
		},
		// 多选选中数据
		handleSelectionChange(selection) {
			this.selectData = selection
		},
		// 按钮事件
		buttonEvent(item, typeList, rowsdata) {
			const data = {
				buttonType: typeList,
				buttonRows: item,
				rowsData: rowsdata
			}
			this.$emit('buttonEvent', data)
		},
		// 搜索事件
		searchQuery() {
			this.$emit('searchQuery', this.queryParams)
		},
		// 重置事件
		resetQuery() {
			this.$emit('resetQuery')
			this.queryParams = {}
		},
		// 返回字典数据
		returnDictData(dictName) {
			let dataArry = this.dictMap[dictName];
			return dataArry
		},
		// 切换布局显示
		switchLayout() {
			this.switchLayoutStatus = this.switchLayoutStatus === 'table' ? 'sudoku' : 'table'
		},
		// 获取九宫格选中的数组
		checkSudokuArray(array) {
			console.log(array)
		}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import './fonts/TableMaking.css';
/*  .fieldList {
		margin-top: 30px;
  } */
  .topBtnList {
	margin-bottom: 20px;
  }
  .highlightType {
		color: #0089ff;
		cursor: pointer
  }
  .tableSwitchLayout {
		text-align: right;
		margin-bottom: 10px
  }
  .tableSwitchLayout .btn {
		padding: 0px;
		color: #999;
  }
  .tableSwitchLayout .btn.active {
		color: #409EFF
  }
</style>
